<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <!-- ECharts单文件引入 -->
    <script src="js/lib/echarts-2.2.7/echarts.js"></script>
    <script src="js/lib/jquery-1.11.2.min.js"></script>
    <script src="js/lib/jSouper.min.js"></script>
    <script src="http://dev.dotnar.com:3000/config/config.public.json"></script>
    <script type="text/javascript">
        window.appConfig = appConfigPub;
        // 路径配置
        require.config({
            paths: {
                echarts: 'js/lib/echarts-2.2.7'
            }
        });
        define("jQuery",function () {
            return $
        });
    </script>
    <title>ECharts</title>
    <style type="text/css">
html,body,#main{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}
    </style>
</head>
<body>
    <div id="jSouperApp">
        <h1>{{title}}</h1>
        <address
            province-input="{{'province'}}"
            province-value="{{province}}"
            city-input="{{'city'}}"
            city-value="{{city}}"
            county-input="{{'county'}}"
            county-value="{{county}}"
            event-changeprovince="{{'change_province'}}"
            event-changecity="{{'change_city'}}"
        ></address>
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    <script>
   require(
   	[
   		'echarts',
   		'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
   	],
   	function(ec) {
   		// 基于准备好的dom，初始化echarts图表
   		window.myChart = ec.init(document.getElementById('main'));
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');


    var _province_map = {
        // 23个省
        "省": ['广东', '青海', '四川', '海南', '陕西',
            '甘肃', '云南', '湖南', '湖北', '黑龙江',
            '贵州', '山东', '江西', '河南', '河北',
            '山西', '安徽', '福建', '浙江', '江苏',
            '吉林', '辽宁', '台湾'
            ,'南海诸岛'/*PS，隶属于海南*/
        ],
        // 5个自治区
        "自治区": ['新疆', '广西', '宁夏', '内蒙古', '西藏'],
        // 4个直辖市
        "市": ['北京', '天津', '上海', '重庆'],
        // 2个特别行政区
        "特別行政區": ['香港', '澳门']
    };
    var _province_map_name = {
        '广西':'广西壮族',
        '新疆':'新疆维吾尔',
        '宁夏':'宁夏回族',
        '澳门':'澳門',
        '南海诸岛': '海南'
    };
    window.get_full_province_name = function get_full_province_name(simple_name) {
        var _province_name
        jSouper.forEach(_province_map, function(_province_list, type) {
            if (jSouper.indexOf(_province_list, simple_name) !== -1) {
                _province_name = (_province_map_name[simple_name] || simple_name) + type
                return false
            }
        });
        return _province_name || simple_name;
    };

myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
    if (option.series[0].mapType == "china") {
        var _full_province_name = get_full_province_name(param.target);
        use_map("province." + _full_province_name);
        App.set("province", _full_province_name);
    } else {
        use_map("city." + param.target);
        App.set("city", param.target);
    }
});
require(["echarts/util/mapData/params"], function(params) {
    params.params.中华人民共和国 = {
        getGeoJson: function(callback) {
            $.getJSON('./map-source/geo-mix/country.中华人民共和国.json', function(data) {
                // 压缩后的地图数据必须使用 decode 函数转换
                // callback(echarts.util.mapData.params.decode(data));
                callback(data);
            });
        }
    };
    window.use_map = function use_map(file_name) {
        params.params[file_name] = {
            getGeoJson: function(callback) {
                $.getJSON(`./map-source/geo-mix/${file_name}.json`, function(data) {
                    // 压缩后的地图数据必须使用 decode 函数转换
                    // callback(echarts.util.mapData.params.decode(data));
                    callback(data);
                });
            }
        };
        option.series[0].mapType = file_name;
        option.title.subtext = file_name;
        myChart.setOption(option, true);
    };
});
option = {
    title: {
        text : '全国34个省市自治区',
        subtext : 'china （滚轮或点击切换）'
    },
    tooltip : {
        trigger: 'item',
        formatter: '滚轮切换或双击进入该省<br/>{b}'
    },
    // legend: {
    //     orient: 'vertical',
    //     x:'right',
    //     data:['随机数据']
    // },
    // dataRange: {
    //     min: 0,
    //     max: 1000,
    //     color:['red','green'],
    //     text:['高','低'],           // 文本，默认为数值文本
    //     calculable : true
    // },
    series : [
        {
            name: '随机数据',
            type: 'map',
            // mapType: '中华人民共和国',
            mapType: 'china',
            selectedMode : 'single',
            itemStyle:{
                normal:{label:{show:true,borderColor: '#333'}},
                emphasis:{label:{show:true}}
            },
            data:[
            ]
        }
    ]
};
   		// 为echarts对象加载数据 
   		myChart.setOption(option);
   	}
   );
    </script>
    <script>  
    var _tasks = [
        $.Deferred(),
        $.getScript("js/lib/tools.js"),
        $.getScript("template/js/xmp.customTag.js")
    ];
    $.when.apply($, _tasks).then(function() {
        jSouper.app({
            Id: "jSouperApp",
            Data: {
                title: "地图选取测试"
            }
        });
        require(["echarts/util/mapData/params"], function(params) {
            //省份改变
            App.set("change_province", function() {
                var _province = App.get("province");
                if (_province) {
                    var _province_name =get_full_province_name(_province);
                    use_map("province."+_province_name);
                    // params.params[_province_name] = {
                    //     getGeoJson: function(callback) {
                    //         $.getJSON(`./map-source/geo-mix/province.${_province_name}.json`, function(data) {
                    //             // 压缩后的地图数据必须使用 decode 函数转换
                    //             // callback(echarts.util.mapData.params.decode(data));
                    //             callback(data);
                    //         });
                    //     }
                    // };
                    // option.series[0].mapType = _province_name;
                    // option.title.subtext = _province_name;
                    // myChart.setOption(option, true);
                }
            });
            //城市改变
            App.set("change_city", function() {
                var _city = App.get("city");
                if (_city) {
                    var _city_name = _city+"市";
                    params.params[_city_name] = {
                        getGeoJson: function(callback) {
                            $.getJSON(`./map-source/geo-mix/city.${_city_name}.json`, function(data) {
                                // 压缩后的地图数据必须使用 decode 函数转换
                                // callback(echarts.util.mapData.params.decode(data));
                                callback(data);
                            });
                        }
                    };
                    option.series[0].mapType = _city_name;
                    option.title.subtext = _city_name;
                    myChart.setOption(option, true);
                }
            });
        });
    });
    require(['js/lib/require.text!template/xmp.customTag.html'], function(t) {
        jSouper.parse(t);
        _tasks[0].resolve();
    });
    </script>
</body>